<template>
    <div class="outer">
        <div class="list" v-for="(item, index) in list" :key="index">
            <div class="title">
                <img :src="item.icon" alt="">
                <p class="name line1">
                    {{ item.title }}
                </p>
            </div>
            <div class="set">
                <div class="data">
                    <span class="dz" v-if="item.op == 1">{{ item.likes }}点赞</span>
                    <span class="dz" v-if="item.op != 1">{{ item.file_size }}</span>
                    <span class="line"></span>
                    <span class="nums" v-if="item.op == 1">{{ item.views
                        }}浏览</span>
                    <span class="nums" v-if="item.op != 1">{{ item.downnum }}下载</span>
                    <span class="line"></span>
                    <span class="nickname line1">{{ item.user_nickname }}</span>
                </div>

                <div class="btn">
                    <div class="price" v-if="item.price > 0">
                        ￥ {{ item.price }}
                    </div>
                    <div class="price" v-else>
                        免费
                    </div>
                    <button v-if="item.op == 1" @click="goPage(item.is_pay, '/articleRead', item.id)">浏览</button>
                    <button v-if="item.op != 1"
                        @click="download(item.is_pay, item.url, item.url_name, item.id)">下载</button>

                    <button style="background-color: red;" @click="changeTop(item.id)"
                        v-if="item.is_top != 1 && item.is_mine == 1">置顶</button>

                </div>
            </div>

        </div>

        <el-empty style="margin: 0 auto;" description="没有内容了" v-if="list.length == 0"></el-empty>



        <el-dialog :visible.sync="showPay" width="400px" @close="clearTimer">
            <span slot="title" class="dialog-header">
                <i style="color:#1068E7;margin-right: 5px;" class="iconfont">&#xe638;</i>微信扫码支付
            </span>
            <div style="display: flex;align-items: center;justify-content: center;">
                <img style="max-width: 300px;max-height: 300px;" :src="pay_img" alt="">
            </div>
        </el-dialog>

        <el-dialog top="40vh" title="提示" :visible.sync="showArt" width="350px">
            <span slot="title" class="dialog-header" style="font-size: 18px;">
                <i style="color:#d41f19;margin-right: 12px;" class="el-icon-money"></i>文库支付方式
            </span>
            <span class="dialog-footer2">
                <el-button type="success" @click="buyNow(1)">微信支付</el-button>
                <el-button type="primary" @click="buyNow(2)">余额支付</el-button>
            </span>
        </el-dialog>
    </div>

</template>
<script>
import axios from 'axios';
import { saveAs } from 'file-saver';
import { baseUrl } from '@/apis/index'

export default {
    data() {
        return {
            list: [],
            dialogVisible: false,
            form: { type: '' },
            pageNum: 1,
            totalPage: 1,
            loading: false,
            total: 0,
            new_id: 0,
            showPay: false,
            pay_img: '',
            showArt: false,
            timer: null,
            art_id: ''
        }
    },
    props: {
        id: {
            type: Number || String,
            default: 0,
        }
    },
    mounted() {
        let id = this.$route.query.id
        console.log(id, '获取到的传参')
        if (id) {
            this.new_id = id
            this.pageNum = 1
        }
        this.getList()
        window.addEventListener('scroll', this.handleScroll); // 监听滚动事件

    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll); // 移除监听
    },

    methods: {

        buyNow(op) {
            let params = {
                id: this.art_id,
                pay_op: op
            }
            this.$api.payArt(params).then(res => {
                if (res.data.code == 1) {
                    this.showArt = false
                    if (op == 1) {
                        this.showPay = true
                        this.pay_img = baseUrl + 'home/base/qrcod?url=' + res.data.data.code_url;
                        this.query_art(res.data.data.id)
                    } else {

                        this.$message({
                            message: '购买成功',
                            type: 'success'
                        })
                        this.list = []
                        this.pageNum = 1
                        this.getList()
                    }
                }
            })
        },

        query_art(id) {
            // 3秒定时执行
            this.timer = setInterval(() => {
                let params = {
                    id
                }

                this.$api.queryArticle(params).then(res => {
                    if (res.data.code == 1) {
                        this.showPay = false
                        this.$message({
                            message: '购买文库成功',
                            type: 'success'
                        })
                        this.clearTimer()
                        this.list = []

                        this.pageNum = 1
                        this.getList()
                    }
                })
            }, 3000)
        },


        clearTimer() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        },


        download(is_pay, filePath, fileName, id) {
            if (is_pay == 2) {
                this.art_id = id
                this.showArt = true
                return
            }

            let url = baseUrl + 'home/base/download?filePath=' + filePath + '&fileName=' + fileName + '&id=' + id
            window.open(url);
        },
        goPage(is_pay, url, aid) {

            if (is_pay == 2) {
                this.art_id = aid

                this.showArt = true
                return
            }

            this.$router.push({
                path: url,
                query: {
                    aid
                }
            })
        },

        // 置顶专栏操作
        changeTop(id) {
            let params = {
                id,
                status: 1
            }
            this.$api.topArts(params).then(res => {
                if (res.data.code == 1) {
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                    this.list = []
                    this.pageNum = 1
                    this.getList()
                }
            })
        },
        // 文库
        getList() {
            this.loading = true
            let params = {
                page: this.pageNum,
                id: this.id != 0 ? this.id : this.new_id
            }
            this.$api.getVipArticle(params).then(res => {
                if (res.data.code == 1) {
                    this.totalPage = res.data.data.last_page
                    this.list = this.list.concat(res.data.data.data);
                    this.total = res.data.data.total
                    this.loading = false
                }

            })
        },

        load() {
            console.log("处理触底");
            var page = this.pageNum
            //如果请求未结束就返回不连续请求
            if (this.loading) {
                return
            }
            //数据请求完成无更多数据时
            if (page >= this.totalPage) {
                return false;
            }
            page = parseInt(page) + 1
            this.pageNum = page
            this.getList()
        },
        onsubmit() {
            console.log(this.form);

        },
        handleScroll() {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            const windowHeight = window.innerHeight;
            const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            // 判断是否滚动到底部
            if (scrollTop + windowHeight >= scrollHeight - 20) {
                this.load()
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.dialog-footer2 {
    display: flex;
    justify-content: center;

    button {
        width: 90px;
        height: 40px;
        font-size: 15px;
        line-height: 40px;
        padding: 0;
    }
}

.outer {

    padding-bottom: 20px;
    width: 100%;

    .list {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20px;
        border-bottom: 1px dashed #E5E5E5;
        padding-top: 20px;

        &:hover {
            background-color: #E8F2FE;
        }

        .title {
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 18px;
            color: #000000;

            img {
                width: 16px;
                height: auto;
                margin-right: 16px;
            }

            .name {
                width: 320px;
            }
        }

        .set {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex: 1;
            margin-left: 30px;

            .data {
                font-size: 16px;
                color: #999;
                display: flex;
                align-items: center;

                >span {
                    display: inline-block;
                    flex-shrink: 0;
                }

                .dz {
                    margin-right: 15px;
                    width: 100px;
                    text-align: center;
                }

                .line {
                    width: 2px;
                    height: 15px;
                    background-color: #999;
                }

                .nums {
                    width: 120px;
                    text-align: center;
                }

                .nickname {
                    margin-left: 15px;
                    max-width: 150px;
                }
            }

            .btn {
                display: flex;

                .price {
                    font-size: 20px;
                    color: #D31B23;
                    margin-right: 50px;
                }

                button {
                    width: 80px;
                    height: 30px;
                    background-color: #1169E5;
                    border: none;
                    border-radius: 5px;
                    color: #fff;
                    margin-left: 10px;
                }
            }
        }
    }
}
</style>